<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《华为数字化转型之道》读书打卡系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 自定义弹出层样式 */
        .custom-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s ease;
        }
        
        .custom-modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 0;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            animation: slideIn 0.3s ease;
        }
        
        .custom-modal-header {
            padding: 20px;
            background-color: #3498db;
            color: white;
            border-radius: 8px 8px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .custom-modal-title {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }
        
        .custom-modal-close {
            color: white;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
        }
        
        .custom-modal-body {
            padding: 20px;
            text-align: center;
        }
        
        .custom-modal-message {
            margin: 0 0 20px 0;
            font-size: 16px;
            color: #333;
        }
        
        .custom-modal-footer {
            padding: 15px 20px;
            text-align: center;
            border-top: 1px solid #eee;
        }
        
        .custom-modal-button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        .custom-modal-button:hover {
            background-color: #2980b9;
        }
        
        .custom-modal-button.success {
            background-color: #27ae60;
        }
        
        .custom-modal-button.success:hover {
            background-color: #219653;
        }
        
        .custom-modal-button.error {
            background-color: #e74c3c;
        }
        
        .custom-modal-button.error:hover {
            background-color: #c0392b;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        h1 {
            text-align: center;
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .notification {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .card-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .progress-container {
            margin: 20px 0;
        }
        
        .progress-bar {
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            text-align: center;
            font-weight: bold;
            color: #555;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            flex: 1;
            margin: 0 10px;
            min-width: 120px;
        }
        
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }
        
        .stat-label {
            color: #666;
        }
        
        .records-list {
            margin-top: 20px;
        }
        
        .record-item {
            padding: 15px;
            border-left: 4px solid #667eea;
            background: #f8f9fa;
            margin-bottom: 15px;
            border-radius: 0 5px 5px 0;
        }
        
        .record-date {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .record-pages {
            color: #666;
            margin-bottom: 10px;
        }
        
        .record-notes {
            background: white;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #eee;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: #666;
            margin-top: 30px;
        }
        
        .help-icon {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1001;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
        }
        
        .close {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .stat-item {
                margin: 5px;
                min-width: 100px;
            }
            
            h1 {
                font-size: 1.5em;
            }
        }
    </style>
</head>
<body>
    <div class="help-icon" onclick="showHelp()">?</div>
    
    <div class="container">
        <header>
            <h1>《华为数字化转型之道》读书打卡系统</h1>
            <div style="text-align: center; margin: 10px 0;">
                <a href="https://tqi.techlinkpets3d.com/daka/关于公司组织《华为数字化转型之道》读书会的通知.docx" 
                   style="display: inline-flex; align-items: center; text-decoration: none; color: #3498db; font-weight: bold; margin-right: 20px;" 
                   target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    下载通知
                </a>
                <button onclick="showDocument()" 
                        style="display: inline-flex; align-items: center; background-color: #2ecc71; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                    在线查看
                </button>
            </div>
            <p style="text-align: center;">提升团队对数字化转型的系统认知，推动公司战略落地与组织能力升级</p>
        </header>
        
        <div class="notification">
            <strong>读书会通知：</strong> 每日阅读11页，共需30天读完329页。请按时打卡并分享读书心得。
        </div>
        
        <div class="card">
            <h2 class="card-title">今日打卡</h2>
            <form id="dakaForm" action="daka.php" method="POST">
                <div class="form-group">
                    <label for="readingDate">阅读日期：</label>
                    <input type="date" id="readingDate" name="readingDate" required>
                </div>
                
                <div class="form-group">
                    <label for="pagesRead">今日阅读页数：</label>
                    <input type="number" id="pagesRead" name="pagesRead" min="1" max="50" value="11" required>
                </div>
                
                <div class="form-group">
                    <label for="notes">读书笔记/心得分享：</label>
                    <textarea id="notes" name="notes" placeholder="请分享您的读书笔记或心得体会..."></textarea>
                </div>
                
                <button type="submit" class="btn">提交打卡</button>
            </form>
        </div>
        
        <div class="card">
            <h2 class="card-title">阅读进度</h2>
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                </div>
                <div class="progress-text" id="progressText">已读 0 页，共 329 页</div>
            </div>
            
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number" id="daysCompleted">0</div>
                    <div class="stat-label">已完成天数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="totalPages">0</div>
                    <div class="stat-label">累计阅读页数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="avgPages">0</div>
                    <div class="stat-label">日均页数</div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <h2 class="card-title">打卡记录</h2>
            <div class="records-list" id="recordsList">
                <!-- 打卡记录将通过JavaScript动态加载 -->
                <p style="text-align: center; color: #666;">暂无打卡记录</p>
            </div>
        </div>
    </div>
    
    <!-- 帮助说明弹窗 -->
    <div id="helpModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeHelp()">&times;</span>
            <h2>系统使用说明</h2>
            <h3>操作步骤：</h3>
            <ol>
                <li><strong>每日打卡</strong>：每天阅读后，在"今日打卡"区域填写阅读日期、页数和心得，点击"提交打卡"</li>
                <li><strong>查看进度</strong>：在"阅读进度"区域可查看整体阅读进度和统计数据</li>
                <li><strong>查看记录</strong>：在"打卡记录"区域可查看历史打卡记录和分享的笔记</li>
            </ol>
            
            <h3>读书会安排：</h3>
            <ul>
                <li><strong>每日阅读打卡</strong>：整书共计329页，每天读11页，共需一个月内读完</li>
                <li><strong>每周群内分享</strong>：每周六在钉钉读书群内开展线上分享会</li>
                <li><strong>月底书面总结</strong>：月末提交一篇500字以上读后感</li>
                <li><strong>月底线上考试</strong>：由数字化中心负责组织</li>
            </ul>
            
            <h3>激励机制：</h3>
            <ul>
                <li><strong>排名奖励</strong>：按分数从高到低排序，奖励前3名（3000元/2000元/1000元）</li>
                <li><strong>末位约束</strong>：倒数后3名需乐捐（800元/600元/300元）</li>
            </ul>
        </div>
    </div>
    
    <footer>
        <p>© 2025 公司读书会项目 | 《华为数字化转型之道》读书打卡系统</p>
    </footer>
    
    <!-- 文档查看弹窗 -->
    <div id="documentModal" class="modal">
        <div class="modal-content" style="width: 90%; max-width: 1000px; height: 90vh;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #eee;">
                <h2 style="margin: 0;">《华为数字化转型之道》读书会通知</h2>
                <span class="close" onclick="closeDocument()">&times;</span>
            </div>
            <div style="padding: 15px; height: calc(90vh - 100px); overflow: auto;">
                <iframe id="documentFrame" src="" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <div style="padding: 15px; border-top: 1px solid #eee; text-align: right;">
                <a href="https://tqi.techlinkpets3d.com/daka/关于公司组织《华为数字化转型之道》读书会的通知.docx" 
                   target="_blank" 
                   style="display: inline-flex; align-items: center; text-decoration: none; color: #3498db; font-weight: bold; margin-right: 15px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    下载文档
                </a>
                <button onclick="closeDocument()" style="background-color: #3498db; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- 自定义弹出层 -->
    <div id="customModal" class="custom-modal">
        <div class="custom-modal-content">
            <div class="custom-modal-header">
                <h3 class="custom-modal-title" id="customModalTitle">提示</h3>
                <span class="custom-modal-close" onclick="closeCustomModal()">&times;</span>
            </div>
            <div class="custom-modal-body">
                <p class="custom-modal-message" id="customModalMessage"></p>
            </div>
            <div class="custom-modal-footer">
                <button class="custom-modal-button" id="customModalButton" onclick="closeCustomModal()">确定</button>
            </div>
        </div>
    </div>
    
    <script>
        // 设置默认日期为今天
        document.getElementById('readingDate').valueAsDate = new Date();
        
        // 显示自定义弹出层
        function showCustomModal(message, title = "提示", type = "info") {
            const modal = document.getElementById('customModal');
            const titleElement = document.getElementById('customModalTitle');
            const messageElement = document.getElementById('customModalMessage');
            const button = document.getElementById('customModalButton');
            
            titleElement.textContent = title;
            messageElement.textContent = message;
            
            // 根据类型设置按钮样式
            button.className = "custom-modal-button";
            if (type === "success") {
                button.classList.add("success");
            } else if (type === "error") {
                button.classList.add("error");
            }
            
            modal.style.display = "block";
        }
        
        // 关闭自定义弹出层
        function closeCustomModal() {
            const modal = document.getElementById('customModal');
            modal.style.display = "none";
        }
        
        // 点击弹出层背景关闭弹出层
        window.onclick = function(event) {
            const modal = document.getElementById('customModal');
            if (event.target == modal) {
                closeCustomModal();
            }
        }
        
        // 显示帮助弹窗
        function showHelp() {
            document.getElementById('helpModal').style.display = 'flex';
        }
        
        // 关闭帮助弹窗
        function closeHelp() {
            document.getElementById('helpModal').style.display = 'none';
        }
        
        // 显示文档弹窗
        function showDocument() {
            const modal = document.getElementById('documentModal');
            const iframe = document.getElementById('documentFrame');
            // 使用Google Docs Viewer来在线查看文档
            iframe.src = 'https://docs.google.com/gview?url=https://tqi.techlinkpets3d.com/daka/关于公司组织《华为数字化转型之道》读书会的通知.docx&embedded=true';
            modal.style.display = 'flex';
        }
        
        // 关闭文档弹窗
        function closeDocument() {
            const modal = document.getElementById('documentModal');
            const iframe = document.getElementById('documentFrame');
            modal.style.display = 'none';
            // 清空iframe内容以提高性能
            iframe.src = '';
        }
        
        // 点击弹窗外部关闭（帮助弹窗）
        window.onclick = function(event) {
            const helpModal = document.getElementById('helpModal');
            const documentModal = document.getElementById('documentModal');
            
            if (event.target == helpModal) {
                helpModal.style.display = 'none';
            }
            
            if (event.target == documentModal) {
                documentModal.style.display = 'none';
                // 清空iframe内容以提高性能
                document.getElementById('documentFrame').src = '';
            }
        }
        
        // 从服务器获取数据并更新进度条
        function updateProgress() {
            fetch('daka.php', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const stats = data.data.stats;
                    const records = data.data.records;
                    
                    // 更新进度条
                    const progressPercent = (stats.totalPages / stats.totalBookPages) * 100;
                    document.getElementById('progressFill').style.width = progressPercent + '%';
                    document.getElementById('progressText').textContent = `已读 ${stats.totalPages} 页，共 ${stats.totalBookPages} 页`;
                    
                    // 更新统计数字
                    document.getElementById('daysCompleted').textContent = stats.daysCompleted;
                    document.getElementById('totalPages').textContent = stats.totalPages;
                    document.getElementById('avgPages').textContent = stats.avgPages;
                    
                    // 更新打卡记录列表
                    updateRecordsList(records);
                } else {
                    // 增加对message字段的容错处理
                    const errorMessage = data.message || data.msg || '未知错误';
                    console.error('获取数据失败:', errorMessage);
                }
            })
            .catch(error => {
                console.error('网络错误:', error);
                // 如果无法获取数据，显示错误信息
                document.getElementById('recordsList').innerHTML = '<p style="text-align: center; color: #e74c3c;">无法加载打卡记录，请检查网络连接</p>';
            });
        }
        
        // 更新打卡记录列表
        function updateRecordsList(records) {
            const recordsList = document.getElementById('recordsList');
            
            if (!records || records.length === 0) {
                recordsList.innerHTML = '<p style="text-align: center; color: #666;">暂无打卡记录</p>';
                return;
            }
            
            let html = '';
            records.forEach(record => {
                html += `
                <div class="record-item">
                    <div class="record-date">${record.reading_date}</div>
                    <div class="record-pages">阅读页数：${record.pages_read} 页</div>
                    ${record.notes ? `<div class="record-notes">${record.notes}</div>` : ''}
                </div>
                `;
            });
            
            recordsList.innerHTML = html;
        }
        
        // 页面加载完成后更新进度
        document.addEventListener('DOMContentLoaded', function() {
            updateProgress();
        });
        
        // 表单提交处理
        document.getElementById('dakaForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            
            // 发送数据到服务器
            fetch('daka.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showCustomModal('打卡提交成功！', '成功', 'success');
                    // 重置表单
                    this.reset();
                    document.getElementById('readingDate').valueAsDate = new Date();
                    // 更新进度和记录
                    updateProgress();
                } else {
                    // 增加对message字段的容错处理
                    const errorMessage = data.message || data.msg || '未知错误';
                    showCustomModal('打卡失败：' + errorMessage, '错误', 'error');
                }
            })
            .catch(error => {
                console.error('网络错误:', error);
                showCustomModal('网络错误，请稍后再试', '错误', 'error');
            });
        });
    </script>
</body>
</html>